[#import "/manage/util/footable.html" as t/]
[#macro activity data={}]
[#if data.is_activity == 1 || data.is_activity]
<i title="启用" class="fa fa-check text-navy"></i>
[#else]
<i title="作废" class="fa fa-times text-danger"></i>
[/#if]
[/#macro]
<form action="" method="get">
    <input id="newQuery" name="newQuery" vlaue="${commond.newQuery}" type="hidden"/>
    <input type="hidden" value="0" name="pageNumber">
    <input name="orderBy" value="${commond.orderBy}" type="hidden"/>
    <input name="orderByClause" value="${commond.orderByClause}" type="hidden"/>
    <div class="row">
        <div class="col-sm-4">
            <div class="input-group m-b">
                <span class="input-group-addon">菜单名称:</span>
                <input id="menuName" name="menuName" class="form-control input-sm inline"
                       value="${commond.menuName}" placeholder="菜单名称">
            </div>
        </div>

        <div class="col-sm-3 select-div">
            <div class="input-group m-b">
                <span class="input-group-addon">父级菜单:</span>
                <select name="parentMenu" id="parentMenu" class="form-control">
                    <option value="">不限</option>
                    <option value="root">root</option>
                    [#list one_level_menus as data]
                        <option value="${data.id}">${data.menu_name}</option>
                    [/#list]
                </select>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-4">
                        <a id="btn_search" class="btn btn-primary btn-sm" onmousedown="setTag();"
                           onclick="Page.prototype.seturlnew(this, 0, 'div_table_container');">查 询</a>
                    </div>
                    <div class="col-sm-4">
                        <a data-toggle="modal" data-l-href="${request.contextPath}/manage/resource/menuform.html"
                           data-target="#modal-menumain-form" class="btn btn-primary btn-sm">添加</a>
                    </div>
                </div>

            </div>
        </div>

    </div>
</form>
<table class="footable table table-stripped table-bordered table-hover toggle-arrow-tiny" data-page-size="20"
       data-filter=#filter>
    <thead>
    <tr>
        <th width="15%" data-sort-ignore="true">一级菜单</th>
        <th width="15%" data-sort-ignore="true">二级菜单</th>
        <th width="20%" data-sort-ignore="true" data-hide="phone,tablet">菜单编码</th>
        <th data-sort-ignore="true" data-hide="phone,tablet">uri</th>
        <th width="5%" data-hide="phone,tablet">排序</th>
        <th data-sort-ignore="true" width="5%">操作</th>
    </tr>
    </thead>
    <tbody>
    [#list datas as data]
    <tr id="${data.id}">
        <td>${(data.one_name??)?string('<i class="fa ${data.one_icon}"></i>&nbsp;&nbsp;'+data.one_name, '<i
                class="fa fa-th-large"></i>&nbsp;&nbsp;root')}
            [#if data.one_is_activity == 1 || !(data.one_name??) || data.one_is_activity]
            <i title="启用" class="fa fa-check text-navy"></i>
            [#else]
            <i title="作废" class="fa fa-times text-danger"></i>
            [/#if]
        </td>
        <td><i class="fa ${(data.icon?? && data.icon != 'none')?string(data.icon, data.one_icon)}"></i>&nbsp;&nbsp;${data.menu_name}
            [@activity data=data/]
        </td>
        <td>${data.code}
            [@activity data=data/]
        </td>
        <td>[#if data.uri == 'none']${data.uri}[#else]<a href="${request.contextPath}${data.uri}" target="_blank">${data.uri}</a>[/#if]
            [@activity data=data/]
        </td>
        <td data-value="${data.sort}"><input data-vcxx-oldval="${data.sort}" data-vcxx-id="${data.id}"
                                             data-vcxx-name="sort" class="form-control input-sm" value="${data.sort}"
                                             name=""></td>
        <td><a class="btn  btn-link" title="编辑" data-toggle="modal"
               data-l-href="${request.contextPath}/manage/resource/menuform/${data.id}.html"
               data-target="#modal-menumain-form"><i class="fa fa-pencil"></i></a></td>
    </tr>
    [/#list]
    </tbody>
    [@t.paged commond=commond ibox_content_id="div_table_container"/]
</table>
<script type="text/javascript">
    $(document).ready(function () {

        $("#parentMenu option[value='${commond.parentMenu}'] ").attr("selected", true);

        $('.footable').footable({}).on('footable_filtering', function (e) {
            var selected = $('#filter-select').find(':selected').val();
            if (selected && selected.length > 0) {
                e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                e.clear = !e.filter;
            }
        });
        $('#change-page-size').change(function (e) {
            e.preventDefault();
            var pageSize = $(this).val();
            $('.footable').data('page-size', pageSize);
            $('.footable').trigger('footable_initialized');
        });

        $('#filter-select').change(function (e) {
            e.preventDefault();
            $('.footable').trigger('footable_filter', {filter: $('#filter').val()});
        });

        $('.footable').trigger('footable_filter', {filter: $('#filter').val()});

        var oTable = $('.footable');

        oTable.find('input[data-vcxx-name="sort"]').on('blur', function (e) {
            var $this = $(this);
            var data_id = $this.data('vcxx-id');
            var data_oldval = $this.data('vcxx-oldval');
            if (data_oldval == $this.val()) {
                return;
            }

            $.post("${request.contextPath}/manage/resource/menuinline",
                {id: data_id, column: 'sort', value: $this.val()},
                function (result) {
                    $this.parent().data('value', result);
                    var footableSort = $('.footable').data('footable-sort');
                    footableSort.doSort(4, 'ascending');
                });
        });

    });
    function setTag() {
        $("#newQuery").val(1);
    }
</script>
   